<template>
  <el-container>
    <el-header class="header">
      <div class="logo">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '10px' : '100px'">
        <!-- 折叠的div -->
        <div class="collapse" @click="doCollapse">></div>
        <el-tree
          :data="arr"
          node-key="id"
          :collapse="isCollapse"
          :props="{ children: 'childMenus', label: 'name' }"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main>
        <!-- 卡片 -->
        <el-card class="box-card">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <div class="badyclass">
                <el-form-item label="菜名" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                  <el-select
                    v-model="form.status"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="启用" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="feny"
                    type="primary"
                    icon="el-icon-search"
                    class="jy"
                    size="mini"
                    >查询</el-button
                  >
                  <el-button class="jy" size="mini" @click="add">
                    <i class="el-icon-refresh"></i>
                    新增</el-button
                  >
                </el-form-item>
              </div>
            </el-row>
            <el-button class="jy" size="mini" @click="rest">
              <i class="el-icon-refresh"></i>
              重置</el-button
            >
          </el-form>
          <el-table
            :data="userList"
            border
            style="width: 100%"
            max-height="600"
            class="el-table-cc"
          >
            <el-table-column prop="id" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column
              prop="image"
              label="图片"
              align="center"
              class="180"
            >
              <template slot-scope="scope">
                <el-popover placement="right" trigger="hover">
                  <img :src="scope.row.image" class="imgs" />
                  <img
                    slot="reference"
                    :src="scope.row.image"
                    style="max-height: 50px; max-width: 150px"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="菜名"
              align="center"
              width="134px"
            >
            </el-table-column>
            <el-table-column
              prop="cateName"
              label="归属菜品"
              align="center"
              width="110px"
            >
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              align="center"
              width="125px"
              show-overflow-tooltip
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              align="center"
              width="70px"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="140px"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model.number="scope.row.status"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  :active-value="0"
                  :inactive-value="1"
                  active-text="禁用"
                  inactive-text="启用"
                  @change="updateStatus(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="50" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  :disabled="scope.row.status == 1 ? false : true"
                  size="mini"
                  @click="toUpdate(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  :disabled="scope.row.status == 1 ? false : true"
                  size="mini"
                  @click="del(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {
  getDeleteById,
  updateStatus,
  selectAllByCate,
  categoryTree,
} from "../../api/category";
export default {
  data() {
    return {
      form: {
        name: "",
        status: "",
      },
      status: 0,
      //当前页码
      current: 1,
      //当前条数
      size: 3,
      //总条数
      total: 0,
      pid: "",
      id: "",
      userList: [],
      arr: [],
      isCollapse: false,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    //内侧tree树形结构
    async getcategoryTree() {
      let result = await categoryTree();
      this.arr = result.data.tree;
    },
    //分页的时候查询的方法
    feny() {
      this.pid = "";
      this.id = "";
      this.getselectAllByCate();
    },
    //表单查询
    getselect() {
      this.current = 1;
      this.getselectAllByCate();
    },
    async getselectAllByCate() {
      let result = await selectAllByCate(
        this.current,
        this.size,
        this.form.name,
        this.form.status,
        this.id,
        this.pid
      );
      this.userList = result.data.pageList.records;
      this.total = result.data.pageList.total;
      console.log(this.total);
    },

    //点击修改按钮触发
    toUpdate(id) {
      this.$router.push({ name: "categoryupdate", params: { id: id } });
    },
    //修改状态
    async updateStatus(id, status) {
      let result = await updateStatus(id, status);
      console.log(result);
    },

    //删除
    async deletedish(id) {
      var $this = this;
      let result = await getDeleteById(id);
      console.log(result);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        //查询数据
        $this.getselect();
      }
    },
    del(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deletedish(id);
          done();
        })
        .catch((_) => {});
    },
    add() {
      this.$router.push({ name: "categoryupdate" });
    },
    //重置
    rest() {
      this.form = {};
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleNodeClick(data) {
      this.pid = data.id;
      this.id = data.id;
      var $this = this;
      if ($this.pid === "1413386191767674886") {
        $this.pid = "";
        $this.id = "";
      }
      this.getselect();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getselectAllByCate();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getselectAllByCate();
    },
    //折叠缩放
    doCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },

  //窗体加载事件
  created() {
    this.getcategoryTree();
    this.getselect();
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
}
.badyclass {
  display: flex;
}
.el-table-cc {
  font-size: 12px;
}
.imgs {
  width: 400px;
  height: 260px;
}
</style>